<template>
  <view class="login-container">
    <view class="logo-container">
      <text class="title">工单管理系统</text>
    </view>
    
    <!-- 手机号登录 -->
    <view class="login-section phone-login-section">
      <view class="section-title">手机号登录</view>
      <view class="input-container">
        <text class="label">手机号</text>
        <input 
          class="phone-input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>
      <button class="login-btn phone-login" @click="handlePhoneLogin" :disabled="isLoginLoading">
        {{ isLoginLoading ? '登录中...' : '手机号登录' }}
      </button>
    </view>
    
    <!-- 微信登录 -->
    <view class="login-section">
      <button class="login-btn wechat-login" @click="handleWechatLogin">
        微信一键登录
      </button>
      <view class="login-tips">请使用微信客户端打开本系统</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { phoneLoginAPI } from '@/api/login.js'

// 手机号输入
const phone = ref('')
// 登录状态
const isLoginLoading = ref(false)

// 微信登录处理（静态页面，不实现实际登录逻辑）
const handleWechatLogin = () => {
  // 显示提示信息
  uni.showToast({ title: '登录功能暂未实现', icon: 'none' })
}

// 手机号登录处理
const handlePhoneLogin = async () => {
  // 基本验证
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  
  // 设置登录状态
  isLoginLoading.value = true
  
  try {
    // 调用后端API进行登录
    const res = await phoneLoginAPI(phone.value)
    
    if (res && res.code === 0) {
      // 登录成功
      // 保存用户信息到本地存储
      const userInfo = {
        id: res.data.id || 'user_' + new Date().getTime(),
        phone: phone.value,
        customerName: res.data.customerName || res.data.name || phone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'), // 脱敏处理
        name: res.data.customerName || res.data.name,
        loginType: 'phone',
        ...res.data // 保存所有返回的用户信息
      }
      
      try {
        uni.setStorageSync('userInfo', userInfo)
        uni.showToast({ title: '登录成功', icon: 'success' })
        
        // 跳转到订单页面（原抢单大厅页面已删除）
        setTimeout(() => {
          uni.switchTab({ url: '/pages/orders/orders' })
        }, 1500)
      } catch (e) {
        console.error('保存用户信息失败:', e)
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    } else {
      // 登录失败
      uni.showToast({ title: res?.msg || '登录失败', icon: 'none' })
    }
  } catch (e) {
    console.error('登录请求失败:', e)
    uni.showToast({ title: '登录请求失败', icon: 'none' })
  } finally {
    isLoginLoading.value = false
  }
}
</script>

<!-- 3. 声明 lang="scss"，确保 SCSS 变量能正常解析 -->
<style lang="scss">
.login-container {
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  box-sizing: border-box;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
  margin-top: 100rpx;
}

.title {
  font-size: 36rpx;
  color: #fff;
  font-weight: 600;
}

.login-section {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
}

.section-title {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  margin-bottom: 30rpx;
  text-align: left;
  font-weight: 500;
}

.input-container {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: $uni-border-radius-base;
  margin: 0 auto 20rpx;
  font-size: $uni-font-size-base;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-weight: 500;
}

.wechat-login {
  background: linear-gradient(135deg, #07c160 0%, #06ae56 100%);
  color: $uni-text-color-inverse;
}

.phone-login {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: $uni-text-color-inverse;
}

.login-tips {
  margin-top: 30rpx;
  font-size: $uni-font-size-sm;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.phone-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  margin: 0 auto 30rpx;
  border: 1rpx solid $uni-border-color;
  border-radius: $uni-border-radius-base;
  font-size: $uni-font-size-base;
  box-sizing: border-box;
  background-color: $uni-bg-color;
}

.phone-login-section {
  margin-top: 40rpx;
}
</style>